<template>
    <el-container style="height: 530px;margin-top:10px;border: 1px solid #ccc;">
        <el-aside width="300px">
            <el-tree :data="courseTypes" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-aside>
        <el-main>

        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "course-type",
        data() {
            return {
                courseTypes:[],
                defaultProps: {
                    children: 'children',//将节点的哪个属性作为字节点
                    label: 'name' //将节点的哪个属性作为文本显示
                }
            };
        },
        methods: {
            //加载左侧类型树的数据
            getCourseTypes(){
                this.axios.get("/course/courseType/tree")
                    .then(res=>{
                        this.courseTypes = res.data;
                    })
            },
            handleNodeClick(data) {
                console.log(data);
            }
        },
        mounted(){
            this.getCourseTypes();
        }
    }
</script>

<style scoped>
    .el-aside{
        border-right: 1px solid #ccc;
    }
</style>